<template>
    <div class="history">
        <img :src="historyBG" style="width: 100%;height: 100%;position: absolute;z-index: -1;" />
        <div class="nav">
            <img :src="back" style="width: 24px;height: 20.93px;" @click="backRouter"/>
            <view class="title">History</view>
            <img :src="deleteIcon" style="width: 24px;height: 24px;" @click="deleteAll"/>
        </div>
        <div v-if="historyList.length <= 0" class="noData">
            <img :src="historyNoData" style="width: 188px;height: 156px;"/>
            <div style="margin-top: 81px;">Can't find your data?</div>
        </div>
        <div class="historyLook" v-else>
            <div v-for="(item, index) in historyList" :key="index" class="cardItem" @click="gotoItem(index)">
                <img :src="deleteIcon" style="width: 24px;height: 24px;position: absolute;top: 10px;right: 10px;z-index: 999;" @click.stop="deleteItem(index)"/>
                <div  class="mainShape" v-if="item.shapeID != -1" :style=" {backgroundImage:'url(' + shapePicList[item.shapeID] + ')', fontFamily: item.fontFamily,  fontSize: item.Size, backgroundSize: item.shapeSize}" >{{ item.text }}</div>
                <div class="mainTitle" :style="{color: item.fontColor, fontFamily: item.fontFamily,  fontSize: item.Size, textShadow: `4px 4px 0px ${item.shadowColor}`}">{{item.text}}</div>
                <div class="mainBG" v-if="item.bgc.val || item.bgc.val == 0">
                    <img :src="item.bgc.val" style="width: 100%;height: 100%;" v-if="item.bgc.type == 2"/>
                    <img :src="bgcList[item.bgc.val - 11]" style="width: 100%;height: 100%;" v-if="item.bgc.type == 1"/>
                    <div class="mainBGC" :style="{ backgroundColor: colorList[item.bgc.val]}" v-else></div>
                </div>
            </div>
        </div>
        <div class="meanList">
            <img :src="meanBG" style="width: 100%;height: 100%;"/>
            <view class="chooseMean">
                <img :src="homeIcon" style="width: 51px;height: 51px;" @click="gotoHome"/>
                <img :src="history_action" style="width: 51px;height: 51px;" />
                <img :src="storeIcon" style="width: 51px;height: 51px;" @click="gotoStore"/>
            </view>
        </div>
    </div>
</template>
<script setup>
import { showConfirmDialog } from 'vant';
import historyBG from '../assets/historyBG.png'
import back from '../assets/back.png'
import deleteIcon from '../assets/delete.png'
import historyNoData from '../assets/historyNoData.png'
import homeIcon from '../assets/homeIcon.png'
import history_action from "../assets/historyIcon_action.png"
import storeIcon from "../assets/storeIcon.png"
import meanBG from "../assets/meanBG.png"
import { useRouter } from "vue-router";
import { onMounted, ref } from 'vue';
import {bgc1, bgc2, bgc3, bgc4, bgc5, bgc6, bgc7, bgc8, bgc9} from "../assets/led/bgcList"
import {shapePic1, shapePic2, shapePic3, shapePic4, shapePic5, shapePic6, shapePic7, shapePic8, shapePic9, shapePic10, shapePic11, shapePic12, shapePic13, shapePic14, shapePic15} from "../assets/led/shapeList"
const router = useRouter()
let colorList = ref(['#FFFFFF', '#03DCFA', '#675BEE', '#E6FF80', '#FA5C03', '#C246FD', '#FA037A', '#5BEEC2', '#FFA680', '#FAE103'])
let shapePicList = ref([shapePic1, shapePic2, shapePic3, shapePic4, shapePic5, shapePic6, shapePic7, shapePic8, shapePic9, shapePic10, shapePic11, shapePic12, shapePic13, shapePic14, shapePic15])
let bgcList = ref([bgc1, bgc2, bgc3, bgc4, bgc5, bgc6, bgc7, bgc8, bgc9])
let backRouter = () => {
    router.back()
}
let historyList = ref([])
onMounted(() => {
    historyList.value = localStorage.getItem("LEDHistory") ? JSON.parse(localStorage.getItem("LEDHistory")) : []
})
const gotoHome = () => {
    router.push('/')
}
const gotoStore = () => {
    router.push('/store')
}
const gotoItem = (index) => {
    router.push('/historyItem?index='+index)
}
const deleteAll= () => {
    showConfirmDialog({
      message:'Are you sure you want to delete all history records?',
      confirmButtonText: 'Confirm',
      cancelButtonText: 'Cancel'
    })
    .then(() => {
      localStorage.removeItem('LEDHistory')
      historyList.value = []
    })
}
const deleteItem = (index) => {
    showConfirmDialog({
      message:'You sure you want to delete it?',
      confirmButtonText: 'Confirm',
      cancelButtonText: 'Cancel'
    })
    .then(() => {
        historyList.value.splice(index, 1)
        localStorage.setItem("LEDHistory", JSON.stringify(historyList.value))
    })
    
}
</script>

<style scoped>
@import "../common/font.css";
.history {
    width: 100vw;
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    white-space: nowrap;
    /* padding: 54px 22px;
    box-sizing: border-box; */
}
.nav {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-family: FredokaOne;
    font-weight: 400;
    font-size: 28px;
    align-items: center;
    position: relative;
    top: 0;
    margin-bottom: 23px;
    color: #fff;
    padding: 54px 22px;
    box-sizing: border-box;
}
.title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.noData {
    margin-top: 50px;
    z-index: 9;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family:SFProTextRegular;
    font-weight: 500;
    font-size: 16px;
    color: #725187;
}
.meanList {
    width: 344px;
    height: 89px;
    position: fixed;
    /* bottom: 38px; */
    top: 85vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
}
.chooseMean {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.historyLook {
    width: 100%;
    z-index: 8;
    padding: 0 20px;
    padding-bottom: 127px;
    box-sizing: border-box;

    position: relative;
    height: 80vh;
    overflow: auto;
}
.cardItem {
    width: 100%;
    height: 185px;
    overflow: hidden;
    margin-bottom: 23px;
    position: relative;
    border: 1px solid #B781DA;
    border-radius: 10px;
}
.mainShape {
    min-width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99;
    background-repeat: repeat;
    background-origin: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;  
}
.mainTitle {
    position: relative;
    top: 0px;
    left: 0;
    min-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 80;
}

.mainBG {
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    /* padding: 15px 0;
    padding-bottom: 31px; */
    box-sizing: border-box;
}
.mainBGC {
    width: 100%;
    height: 100%;
    /* background-color: v-bind('colorList[textStyle.bgc.val]'); */
}
</style>